<template>
  <div class="form">
    <div class="inputBox">
      <button @click="importJson">IMPORT json</button>
    </div>
    <div class="inputBox">
      <button @click="exportPng">导出为png</button>
      <button @click="exportData">导出为数据</button>
    </div>
  </div>
</template>
<script>
import * as d3 from "d3";
import * as ssap from "save-svg-as-png";
import exportFromJSON from "export-from-json";

import {
  rectDrawAdd,
  lineDrawAdd,
  lineLabelDrawAdd,
  textDrawAdd,
  circleDrawAdd,
  svgDrawUpdate,
  polygonDrawAdd,
  polylineDrawAdd,
  ellipseDrawAdd,
} from "../../util/geoDrawAdd.js";
import store from "../../store/index.js";
import axios from "axios";

export default {
  setup() {
    const svg = store.state.svg;
    const data = store.state.svgData;

    function exportPng() {
      ssap.saveSvgAsPng(document.getElementById("mySvg"), "mySvg.png");
    }

    function exportData() {
      const fileName = "mySvg";
      const exportType = "json";

      if (data.length === 0) {
        alert("画布为空!");
      } else {
        exportFromJSON({ data, fileName, exportType });
      }
    }

    async function importJson() {
      const res = await axios.get("./json/mySvg.json");

      res.data.forEach((item) => {
        if (item.type === "svg") {
          svgDrawUpdate(item.geo, item.id);
        } else if (item.type === "rect") {
          rectDrawAdd(item.geo, item.id);
        } else if (item.type === "line") {
          lineDrawAdd(item.geo, item.id);
        } else if (item.type === "text") {
          textDrawAdd(item.geo, item.id);
        } else if (item.type === "circle") {
          circleDrawAdd(item.geo, item.id);
        } else if (item.type === "polygon") {
          polygonDrawAdd(item.geo, item.id);
        } else if (item.type === "polyline") {
          polylineDrawAdd(item.geo, item.id);
        } else if (item.type === "ellipse") {
          ellipseDrawAdd(item.geo, item.id);
        }
      });

      // res.data.forEach((item) => {
      //   [item.type + "DrawUpdate"](item.geo, item.id);
      // });
    }
    return { exportPng, exportData, importJson };
  },
};
</script>